<template>
    <div class="questions-page-layout main-layout">
        <div class="top-pics">
          <img class="logo" src="../../base/images/LOGO_home@2x.png" alt="">
          <img class="title" src="../../base/images/title@2x.png" alt="">
        </div>
        <div class="questions-page-layout-content lmd-font" style="font-size: 18px">
            <div class="inner">
                <div>
                    {{questionsTitle}}
                </div>
                <ul>
                    <li v-for="item in questionsArray"><input name="ans" type="radio" v-bind:value="item.id"/><div>{{item.msg}}</div></li>
                </ul>
            </div>
            <div class="teapic">
                <img src="./images/lr@2x.png" alt="">
            </div>
        </div>
        <div class="answer-page-layout-content lmd-font" style="font-size: 18px;">
            <div style="">
                <ul class="result">
                    <li><img class="questionsImg" src="./images/question.png"/></li>
                    <li><img class="questionsImg" src="./images/question.png"/></li>
                    <li><img class="questionsImg" src="./images/question.png"/></li>
                    <li><img class="questionsImg" src="./images/question.png"/></li>
                    <li><img class="questionsImg" src="./images/question.png"/></li>
                </ul>
                <ul class="result">
                    <li><img class="questionsImg" src="./images/question.png"/></li>
                    <li><img class="questionsImg" src="./images/question.png"/></li>
                    <li><img class="questionsImg" src="./images/question.png"/></li>
                    <li><img class="questionsImg" src="./images/question.png"/></li>
                    <li><img class="questionsImg" src="./images/question.png"/></li>
                </ul>
            </div>
        </div>

        <div class="questions-page-layout-buttons">
            <button class="main" v-on:click="goToNextQuestion">{{submitButtonText}}</button>
        </div>
        <div class="md-font questions-page-layout-rules hide">
            <router-link to="/activity-rules">活动规则</router-link>
        </div>
        <div class="questions-page-layout-report flex flex-horizontal-center flex-vertical-center" style="font-size: 18px">
            <div>
                <div class="questions-page-layout-report-title"></div>
                <div class="questions-page-layout-report-close" v-on:click="closeReportWrapper"></div>
                <div class="questions-page-layout-report-content">
                    <div class="report-content-header">
                        本次成绩:答对<span class="font-color-1">{{anserRight}}</span>道，答错<span class="font-color-2">{{anserWrong}}</span>道;
                        累计获得<span class="font-color-3">{{micheliaChampacaNum}}</span>个黄桷兰、<span class="font-color-4">{{scratchNum}}</span>次刮奖机会
                        <br/> <span style="font-size: 12px">领奖规则请在"个人中心"->"我的奖品"查看</span>
                    </div>
                    <div class="report-content-content" >
                        <div id="scratchCard">
                            <div class="scratchCard-img xlg-font flex flex-horizontal-center flex-vertical-center">
                            </div>

                        </div>
                    </div>
                    <div style="height: 150px;overflow:scroll;">
                        <div class="report-content-footer" v-for="(item,index) in rightKey">
                            <p style="font-weight:bold">{{index+1}}.{{item.title}}</p>
                            答案:  <span style="color: #FF4500;line-height: 20px;letter-spacing: 1.6px;">{{item.answer}}</span>
                        </div>
                        <br/>
                    </div>
                </div>
            </div>

        </div>
        <div class="share-wrapper" v-on:click="closeShareWrapper">
            <div class="flex flex-horizontal-center flex-vertical-center">点击右上角，分享至朋友圈<br>即可查看成绩单以及获奖机会</div>
        </div>
        <div class="bottom-logos">
            <img src="../../base/images/bottom_logo@2x.png" alt="">
        </div>

    </div>
</template>
<script>
    require('./Scratchcard');

    module.exports = {
        data: function () {
            return {
                anserRight: 7,  //答对的题
                anserWrong: 3,  //答错的题
                micheliaChampacaNum: 7, //获得黄角兰的数量
                scratchNum: 1,  //可以刮奖的次数
                submitButtonText: '提交',   //这里有三种 '开始答题' 提交，下一题' '完成答题'
                questionsArray: [],
                questionsTitle: '',
                scratch: true,  //是否展示'继续刮奖' 按钮  默认flase  当用户可以刮奖的次数大于1时设置为true否则为false
                rewards: [],
                useScratchNum:1,
                libanser:[],
                rightKey:[],
                isRight:"",
                currentLib:null,
                resultArray : []
            }
        },
        //组件初始化成功的回调
        mounted: function () {
            var _this = this;
            //向服务器端获取题
            $.post("/wx/queryOneLib", {}, function (data) {
                if (data.code == 200) {
                    var d = data.data;
                    var data = _this.getData(d);
                    _this.setData(data);
                }
            }, "json");

            //默认关闭成绩单弹出框
            _this.closeReportWrapper(1);
            //默认关闭分享框
            _this.closeShareWrapper();
           // _this.openReportWrapper();
           // _this.getScratch();  //这个函数可以测试刮奖  （你可以试试）


        },
        updated:function(){
            $('input[type="radio"]:checked').prop("checked",false);
        },
        methods: {

            //将获取的题目数据绘制到页面上
            setData: function (data) {
                var _this = this;
                if (data) {
                    _this.questionsArray = data.questionsArray ? data.questionsArray : [];
                    _this.questionsTitle = data.questionsArray ? data.questionsTitle : '';
                }
            },

            //向服务器端获取题
            getData: function (o) {
                var _this = this;
                _this.currentLib = o;
                //这里做个用于展示的假数据
                var obj = {};
                var array = [];
                var content = "";
                for (var i = 0; i < o.answerOptionList.length; i++) {
                    if(o.answer==o.answerOptionList[i].option){
                        content = o.answerOptionList[i].content;
                    }
                    array.push({id: o.answerOptionList[i].id+":"+o.answerOptionList[i].option, msg:o.answerOptionList[i].option+"："+o.answerOptionList[i].content})
                }
                obj.questionsArray = array;
                obj.questionsTitle = "1."+o.title;
                _this.rightKey.push({"answer":o.answer+"   "+content,"title":o.title});
                return obj;

                // $.ajax();
            },
            //关闭成绩单弹出框
            closeReportWrapper: function (flag) {
                var _this = this;
                $('.questions-page-layout-report').hide();
                if(flag!=1){
                    _this.$router.push("home");
                }
            },

            //打开成绩单弹出框
            openReportWrapper: function () {
                $('.questions-page-layout-report').show();
            },

            //关闭分享框
            closeShareWrapper: function () {
                $('.share-wrapper').hide();
            },

            //打开分享框
            openShareWrapper: function () {
                $('.share-wrapper').show();
            },

            //到下一道题
            goToNextQuestion: function () {
                var _this = this;

                //提交用户选取的答案
                _this.submitAnswer();


               /// var data = _this.getData();

                /**判断是否是最后一题的根据接口数据逻辑自己写
                 * **/

               // _this.setData(data);
                _this.submitButtonText = '提交'  //如果当前为最后一道题，则把值设置为'完成答题'
            },

            //提交答题
            submitAnswer: function () {
                var _this = this;
                /*****提交的ajax根据自己的接口定义自己写******/
                //$.ajax();
                var val = $("input[type='radio']:checked");

                var ans = val.val().split(":");
                if(ans[0] == undefined||ans[0] == ""){
                    layer.alert("请选择答案!",function (index) {
                        layer.closeAll();
                    });
                    return;
                }
                var currentLib = _this.currentLib;
                $("#questionsImg").show();
                if(currentLib.answer==ans[1]){
                    $(".questionsImg").eq(_this.resultArray.length).attr("src","right.png");
                    _this.resultArray.push(1);
                }else{
                    $(".questionsImg").eq(_this.resultArray.length).attr("src","wrong.png");
                    _this.resultArray.push(0);
                }
                var userId = _this.$root.userId;
                $.post("/wx/library/next",{"answerId":ans[0],"userId":userId},function (data) {
                    if(data.code==200){
                        //setTimeout(function () {
                            $("#questionsImg").hide();
                            var d = data.data;
                            console.log(d);
                            _this.currentLib = d.nextLib;
                            var obj = {};
                            var array = [];
                            var nextLib = d.nextLib;
                            if(!d.isNext&&d.isNext!=undefined){
                                _this.anserRight = d.rightNum==null?0:d.rightNum;
                                //_this.openReportWrapper();
                                _this.openShareWrapper();
                                _this.shareInit();
                            }else{
                                var content = "";
                                for (var i = 0; i < nextLib.answerOptionList.length; i++) {
                                    if(d.nextLib.answer==nextLib.answerOptionList[i].option){
                                        content = nextLib.answerOptionList[i].content;
                                    }
                                    array.push({id: nextLib.answerOptionList[i].id+":"+nextLib.answerOptionList[i].option, msg:nextLib.answerOptionList[i].option+"："+nextLib.answerOptionList[i].content})
                                }
                                _this.isRight = "";
                                obj.questionsArray = array;
                                obj.questionsTitle = d.noAns+"."+nextLib.title;
                                if(d.noAns==10){
                                    _this.submitButtonText = '完成答题'
                                }
                                _this.rightKey.push({"answer":d.nextLib.answer+"   "+content,"title":d.nextLib.title});
                                console.log(_this.rightKey);
                               // _this.rightKey.push(d.nextLib.answer);
                                _this.setData(obj);
                                _this.toggleBackground();

                            }
                       // },1000);
                    }
                },"json")
            },

            //切换背景图（切换树
            toggleBackground: function (ele) {
                var ele = $('.questions-page-layout');
                //背景将会在这几个class中切换
                var classArray = ['questions-page-layout1', 'questions-page-layout2', 'questions-page-layout3'];
                var className = ele[0].className;
                var reg = /(\w*\-\w*\-\w*([1-9]))/ig;
                var matches = className.match(reg);
                if (matches) {
                    var index = classArray.indexOf(matches[0]);
                    if (index != -1) {
                        index = index + 1;
                        if (index >= classArray.length) {
                            index = 1;
                        }
                        ele.removeClass(matches[0]).addClass(classArray[index]);
                    }
                }


            },

            //获取奖品信息
            getScratch: function () {
                var _this = this;
                //应该在AJAX请求成功后初始化，这里先写一个例子，用于展示
                $.post("/wx/scratchCard",{"userId":_this.$root.userId},function (data) {
                    console.log(data);
                    if(data.code == 200){
                        var d = data.data;
                        var giftInfo_1 = d.giftInfo_1;
                        var giftInfo_2 = d.giftInfo_2;
                        var giftInfo_3 = d.giftInfo_3;
                        if(giftInfo_1!=null){
                            _this.rewards.push({name: giftInfo_1.name, id:giftInfo_1.id, reward: true,isForm:giftInfo_1.isForm,recordId:giftInfo_1.recordId});
                        }
                        if(giftInfo_2!=null){
                            _this.rewards.push({name: giftInfo_2.name, id:giftInfo_2.id, reward: true,isForm:giftInfo_2.isForm,recordId:giftInfo_2.recordId});
                        }
                        if(giftInfo_3!=null){
                            _this.rewards.push({name: giftInfo_3.name, id:giftInfo_3.id, reward: true,isForm:giftInfo_3.isForm,recordId:giftInfo_3.recordId});
                        }

                      /*  _this.rewards = [
                            ,  //reward为true表示这个刮刮卡里有奖
                            {name: '电动按摩器', id: 2, reward: true},
                            {reward: false}]  //reward为false表示这个刮刮卡里没奖*/

                        _this.drawScratch();
                    }
                },"json");


                //$.ajax();

            },
            //绘制刮奖区域
            drawScratch: function () {
                var _this = this;

                if (_this.rewards.length > 0) {
                    _this.scratch = _this.rewards.length > 1 ? true : false;
                    var reward = _this.rewards.shift();
                    _this.initScratch(reward);
                    _this.openReportWrapper();
                }
            },

            //初始化刮奖绘制区域
            initScratch: function (reward) {
                var _this = this;
                var container = $("#scratchCard");
                var dom = $("<div>");
                container.append(dom);
                var scratchCard = new ScratchCard({
                    container: dom[0],
                    imgSrc: reward.reward ? reward.name : '继续加油',
                    size: [260, 100],
                    validArea: [80, 10, 100, 80],
                    percentage: 0.4,
                    scratchLayer: {
                        text: '刮开此图层',
                        font: '30px Verdana',
                        color: '#C2C2C2',
                        background: '#E9E9E9',
                    },

                    //用户刮的过程的回调
                    onScratch: function (progress) {

                    },

                    //用户刮完之后的回调
                    onComplete: function () {
                        //只有当获得的礼卷是有奖状态时，才告诉服务器用户刮奖了
                        if (reward.reward) {
                            _this.scratched(reward);
                        }
                        scratchCard.destroy();

                    }
                });

            },


            //通知服务器这个奖品被刮了
            scratched: function (reward) {
                console.log(reward);
                var _this = this;
                if(reward.isForm=="1"){
                    layer.prompt({
                        title: "请输入您的手机号码领取奖品",
                    }, function(value, index, elem){
                        if(value==""){
                            layer.msg("请输入手机号！");
                            return
                        }
                        _this.sendScratchCard(reward.id,value,'','',reward.recordId);
                    });
                }else if(reward.isForm=="2"){
                    layer.open({
                        type: 1,
                        area: ['280px', '200px'], //宽高
                        btn: ['确定'],
                        content: '<br/>' +
                        '<table align="center">' +
                            '<tr style="line-height: 60px">' +
                                '<td style="width: 50px;padding-left: 10px;text-align: left;">' +
                                    '<span class="user-info-lable">姓名:</span>' +
                                '</td>' +
                                '<td>' +
                                    '<input style="display: block;width: 180px;height: 30px;margin: 0 auto;line-height: 30px;padding: 0 5px; border: 1px solid #ccc;box-shadow: 1px 1px 5px rgba(0,0,0,.1) inset;color: #333;" id="mailName"/>' +
                                '</td>' +
                            '</tr>' +
                            '<tr style="line-height: 60px">' +
                                '<td style="width: 50px;padding-left: 10px;text-align: left;">' +
                                    '<span class="user-info-lable">手机号:</span>' +
                                '</td>' +
                                '<td>' +
                                    '<input style="display: block;width: 180px;height: 30px;margin: 0 auto;line-height: 30px;padding: 0 5px; border: 1px solid #ccc;box-shadow: 1px 1px 5px rgba(0,0,0,.1) inset;color: #333;" id="phone"/>' +
                                '</td>' +
                            '</tr>' +
                        '</table>',
                        yes: function(index, layero){
                            //按钮【按钮一】的回调
                            if($("#phone").val()==""){
                                layer.msg("请输入手机号！");
                                return
                            }
                            if($("#mailName").val()==""){
                                layer.msg("请输入姓名！");
                                return
                            }
                            _this.sendScratchCard(reward.id,$("#phone").val(),$("#mailName").val(),'','',reward.recordId);
                        }
                        ,cancel: function(){
                            //layer.closeAll();
                        }
                    });
                }else{
                    _this.sendScratchCard(reward.id,'','','',reward.recordId);
                }

            },
            sendScratchCard(giftId,phone,mailName,mailAddr,recordId){
                var _this = this;
                $.post("/wx/isScratchCard",{"userId":_this.$root.userId,"giftId":giftId,"phone":phone,"mailName":mailName,"mailAddr":mailAddr,'recordId':recordId},function (data) {
                    /*setTimeout(function () {
                        _this.$route.push("home");
                    },3000);*/
                    if(data.code==200) {
                        if (_this.scratchNum == _this.useScratchNum) { //刮奖次数和已经刮奖次数相等就跳转到首页
                            layer.confirm('是否继续参与答题？', function (index) {
                                _this.$router.push("home");
                                layer.closeAll();
                            }, function () {
                                _this.$router.push("my-rewards");
                                layer.closeAll();
                            });
                            /*if(confirm("是否继续参与答题？")){
                            _this.$router.push("home");
                        }else{
                            _this.$router.push("my-rewards");
                        }*/
                        } else { //继续刮奖
                            layer.confirm("还有" + (_this.scratchNum - _this.useScratchNum) + "次刮奖机会，是否还要继续刮奖？", function (index) {
                                _this.useScratchNum++;
                                _this.getScratch();
                                layer.closeAll();
                            }, function () {
                                _this.$router.push("my-rewards");
                                layer.closeAll();
                            });
                            /*if(confirm("还有"+(_this.scratchNum-_this.useScratchNum)+"次刮奖机会，是否还要继续刮奖？")){
                            _this.useScratchNum++;
                            _this.getScratch();
                        }else{
                            _this.$router.push("my-rewards");
                        }*/

                        }
                    }else{
                        var str = data.msg.split("|");
                        if(str[1]=="1"){
                            layer.tips(str[0], '.layui-layer-input',{
                                tips: 1
                            });
                        }else if(str[1]=="2"){
                            layer.tips(data.msg, '#phone',{
                                tips: 1
                            });
                        }

                    }

                },"json");
            },
            shareScratch:function () {
                var _this = this;
                _this.anserWrong = (10 -_this.anserRight);
                _this.micheliaChampacaNum = _this.anserRight;
                /*//显示正确答案
                var index = 1;
                for(var i=0;i<_this.rightKey.length;i++){
                    _this.rightStr += index+"."+_this.rightKey[i]+"  ";
                    index++;
                }*/

                if(_this.anserRight<3){
                    layer.confirm("抱歉！你此次答题没有获得抽奖机会，请再接再励!",function () {
                        $.post("/wx/clearCache",{},function (data) {
                            //跳转
                            _this.$router.push("home");
                            layer.closeAll();
                        },"json");
                    })
                   /* if(confirm("抱歉！你此次答题没有获得抽奖机会，请再接再厉!")){

                    }*/
                } else if(_this.anserRight>=3&&_this.anserRight<6){
                    _this.openReportWrapper();
                    _this. scratchNum = 1;
                    _this.getScratch();
                    _this.scratch = false;
                }
                else if(_this.anserRight>=6&&_this.anserRight<10){
                    _this.openReportWrapper();
                    _this. scratchNum = 2;
                    _this.getScratch();
                    _this.scratch = false;
                }else if(_this.anserRight==10){
                    _this.openReportWrapper();
                    _this. scratchNum = 3;
                    _this.getScratch();
                    _this.scratch = false;
                }
            },
            shareInit:function () {
                var _this = this;
                var url =location.href.split('#')[0];
                var userId = _this.$root.userId;
                $.post("/wx/queryJsInfo",{"url":url,"userId":userId},function (data) {
                    if(data.code==200){
                        var title = "告哈你晓得好多志愿服务知识,赢黄桷兰大奖，为首届重庆市志愿服务项目大赛助力";
                        var link = "http://www.u2ds.com.cn/site/auth?share="+ _this.$root.userId;
                        var imgUrl = "http://www.u2ds.com.cn/image/logo_2.png";
                        var desc = "告哈你晓得好多志愿服务知识,赢黄桷兰大奖，为首届重庆市志愿服务项目大赛助力";

                        var d = data.data;
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: d.appId, // 必填，公众号的唯一标识
                            timestamp: d.timestamp, // 必填，生成签名的时间戳
                            nonceStr: d.nonceStr, // 必填，生成签名的随机串
                            signature: d.signature,// 必填，签名，见附录1
                            jsApiList: ['onMenuShareTimeline',
                                'onMenuShareAppMessage',
                                'onMenuShareQQ',
                                'onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                        });
                        wx.ready(function(){
                            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                            //分享到朋友圈
                            wx.onMenuShareTimeline({
                                title: title, // 分享标题
                                link: link, // 分享链接
                                imgUrl: imgUrl,
                                desc: desc,
                                success: function () {
                                    // 用户确认分享后执行的回调函数
                                    _this.closeShareWrapper();
                                    _this.shareScratch();
                                },
                                cancel: function () {
                                    // 用户取消分享后执行的回调函数

                                }
                            });
                            //分享到朋友
                            wx.onMenuShareAppMessage({
                                title: "告哈你晓得好多志愿服务知识", // 分享标题
                                link: "http://www.u2ds.com.cn/site/auth", // 分享链接
                                imgUrl: "http://www.u2ds.com.cn/image/logo_2.png",
                                desc: "赢黄桷兰大奖，为首届重庆市志愿服务项目大赛助力",
                                success: function () {
                                    // 用户确认分享后执行的回调函数
                                    _this.closeShareWrapper();
                                    _this.shareScratch();
                                },
                                cancel: function () {
                                    // 用户取消分享后执行的回调函数
                                }
                            });
                        });
                        wx.error(function(res){
                            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                        });

                    }
                },"json");
            },
            share:function () {



            }
        }


    }
</script>

<style lang="less">
    input[type='radio']{
        width:20px;
        height: 20px;
        appearance: none;
        -webkit-appearance: none;
        background-image: url('../../base/images/checbox.png');
        background-size: 100%;
        outline: none;
        background-repeat: no-repeat;

    }
    input[type='radio']:checked{
        background: url('../../base/images/checkbox-checked.png');
        background-repeat: no-repeat;
        background-size: 100%;

    }
    .questions-page-layout-buttons{
        
        margin:0 auto;
        margin-top:2vh;
    }
    .questions-page-layout{
        

        .questions-page-layout-rules{
            text-align: center;
            margin-top:10px;
            a{
                color:white
            }
        }
        .questions-page-layout-content {

            .inner{
                background: rgba(255,255,255,0.2);
                border: 1px solid rgba(0,119,162,.5);
                box-shadow: 0 6px 0 0 rgba(210,124,0,0.07);
                border-radius: 8px;
                padding:15px 10px 10px 10px;
                box-sizing: border-box;
                height: 43.5vh;
                overflow: auto;
            }

            .teapic{
                position: absolute;
                right: -3.2vw;
                bottom: -1.8vh;

                img{
                    width: 25.6vw;
                    display: block;
                }
            }
            
        }

        .answer-page-layout-content{
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(0,119,162,.5);
            box-shadow: 0 6px 0 0 rgba(210,124,0,0.07);
            border-radius: 8px;
            width:89.3vw;
            max-height:15.9vh;
            overflow: auto;
            color: #006DB8;
            margin:0 auto;
            padding: .7vh 0 0;
            box-sizing: border-box;
            input{
                margin-right:10px;
                float:left;
            }
            ul{
                /*border-top:1px solid #dedede;*/
                /*margin-top: 10px;*/
                display: block;
                width: 100%;
                height:35px;
                text-align: center;
                padding: 5px 0;
                margin: 0;
            }
            li{
                width:30px;
                height:30px;
                margin: 0 3vw;
                display:inline-block;
                color: black;
            }
        }

        .questions-page-layout-content{
            border-radius: 5px;
            width:89.3vw;
            color: #006DB8;
            margin:0 auto 1.5vh;
            position: relative;

            input{
                margin-right:10px;
                float:left;
            }
            ul{
                border-top:1px solid #dedede;
                margin-top: 10px;
            }
            li{
                margin:15px 5px;
                div{
                    margin-left: 25px;
                }

            }
        }
        .questions-page-layout-report,.share-wrapper{
            width: 100vw;
            height:100vh;
            background-color: rgba(0,0,0,0.3);
            position: absolute;
            top:0px;
            left:0px;

        }
        .questions-page-layout-report>div:first-child{
            width:300px;
            background-color: white;
            border-radius: 5px;
            position:relative;
            .font-color-1{
                color: rgba(60,209,154,1);
            }
            .font-color-2{
                color:#FB7474;
            }
            .font-color-3{
                color: rgba(254,232,82,1);
            }
            .font-color-4{

                color: #FF4700
            }
            .questions-page-layout-report-close{
                position: absolute;
                top:-20px;
                right:-15px;
                width:50px;
                height:50px;
                background-image: url("./images/close.png");
                background-repeat: no-repeat;
                background-size:100%;
            }
            .questions-page-layout-report-title{
                width:40%;
                height:50px;
                background-image: url("./images/report.png");
                position: relative;
                top:-25px;
                margin:0 auto;
                background-size: 100% 100%;
            }
            .questions-page-layout-report-content{
                margin:0px 20px 20px 20px ;
            }
            .report-content-header{
                font-weight:bold;
                text-align: left;

            }
            .report-content-content{
                height:120px;
                border-top:1px solid #dedede;
                border-bottom: 1px solid #dedede;
                margin:10px 0px;
                .scratchCard-img{
                    background-image: radial-gradient(51% 143%, #FC7E00 43%, #FF4700 100%);
                    height:99px;
                    width:260px;
                    position: absolute;
                    top:0px;
                    left:0px;
                    color: white;

                }
                #scratchCard{
                    height:100px;
                    margin-top: 10px;
                    width:260px;
                    position: relative;

                }
            }
        }
        .questions-page-layout-report>div{
            .questions-page-layout-buttons{
                margin-top:1vh;
                width: 260px;
            }
        }

        .share-wrapper{
            color:white;
            div{
                background-image: url('./images/mention.png');
                background-repeat: no-repeat;
                width:300px;
                height: 150px;
                background-size: 100%;
                position: absolute;
                right:20px;
                top:10px;
            }
        }
        .user-info{
            margin-left:0.3em;
            box-sizing: border-box;
            text-align:center;
            font-size:1.0em;
            height:1.7em;
            border-radius:4px;
            border:1px solid #c8cccf;
            color:#6a6f77;
            -web-kit-appearance:none;
            -moz-appearance: none;
            display:block;
            outline:0;
            padding:0 1em;
            text-decoration:none;
            width:90%;
        }
        .user-info-label{
            length:40px;
            text-align:center
        }

    }
    // .questions-page-layout1{
    //     background-image: url("./images/treeBg.png"),url("./images/tree1.png"),url("./images/mountain.png");
    //     background-position: left bottom,center 0px,left 65vh;
    //     background-size: 100% 25vh,auto 79vh,100% 20vh;
    // }
    // .questions-page-layout2{
    //     background-image: url("./images/tree2.png"),url("./images/mountain.png");
    //     background-position: center 0px,left 80vh;
    //     background-size: auto 100vh,100% 20vh;
    // }
    // .questions-page-layout3{
    //     background-image:url("./images/tree3.png"),url("./images/mountain.png");
    //     background-position: center 0px,left 80vh;
    //     background-size: auto 100vh,100% 20vh;
    // }

</style>